<template>
  <div class="feng">
    <div class="head">
      <div class="head1">
        <div class="head1_1"><h1>找药</h1></div>
        <div class="head1_2">
          <div class="head1_2_img"></div>
          <div style="color: white; font-size: 5px; text-align: center">
            消息
          </div>
        </div>
      </div>
      <div class="head2">
        <el-input
          placeholder="请输入内容"
           @change="sousuotiaozhuan"
          v-model="input"
          suffix-icon="el-icon-camera"
          style="width: 95%; margin-left: 10px"
          size="medium"
          clearable
        >
        </el-input>
      </div>
      <div class="head3">
        <span style="left: 10px">国家药监认证</span>
        <span style="left: 45%">正品承诺</span>
        <span style="right: 10px">保密配送</span>
      </div>
    </div>
    <div class="fenleizhaoyao">
      <div class="fenleizhaoyao1">
        <div class="fenleizhaoyao1_1">
          <span>分类找药</span>
        </div>
        <div class="fenleizhaoyao1_2">
          <span @click="gengduofenlei_btu()"> 更多分类&nbsp;></span>
        </div>
      </div>
      <div class="fenleizhaoyao2">
       <el-carousel height="35px" direction="vertical" >
       <el-carousel-item v-for="item in feng.feng3" :key="item">
      <span class="fenleizhaoyao2_1">{{ item }}</span>
    </el-carousel-item>
  </el-carousel>
      </div>
      <div class="fenleizhaoyao3">
        <div class="fenleizhaoyao3_1">
          <div v-for="(item, index) in list6" :key="index" @click="tiaozhuan1(item.id,item.name,item.id2)">
            <div class="fenleizhaoyao_img1" style="flex: 4">
              <el-image
                style="width: 80px; height: 80px"
                :src="item.img"
                :fit="fit"
              ></el-image>
            </div>
            <div style="flex: 1.5">{{ list6[index].name }}</div>
          </div>
        </div>
        <div class="fenleizhaoyao3_2">
          <div v-for="(item, index) in list7" :key="index">
            <div class="fenleizhaoyao_img5" style="flex: 4">
              <el-image
                style="width: 80px; height: 80px"
                :src="item.img"
                :fit="fit"
              ></el-image>
            </div>
            <div style="flex: 1.5">{{ item.name }}</div>
          </div>
        </div>
      </div>
    </div>
    <div class="zhengzhuangzhaoyao">
      <div class="zhengzhuangzhaoyao1">
        <div class="zhengzhuangzhaoyao1_1">
          <span>症状找药</span>
        </div>
        <div class="zhengzhuangzhaoyao1_2">
          <span> 更多症状&nbsp;></span>
        </div>
      </div>
      <div class="zhengzhuangzhaoyao2">
        <div class="zhengzhuangzhaoyao2_1">
          <div
            style="
              flex: 1;
              background-color: rgb(248, 248, 248);
              margin-top: 5px;
              line-height: 39px;
              margin-left: 5px;
            "
            v-for="(item, index) in list.list1"
            :key="index"
          >
            {{ item }}
          </div>
        </div>
        <div class="zhengzhuangzhaoyao2_2">
          <div
            style="
              flex: 1;
              background-color: rgb(248, 248, 248);
              margin-top: 5px;
              line-height: 39px;
              margin-left: 5px;
            "
            v-for="(item2, index) in list.list2"
            :key="index"
          >
            {{ item2 }}
          </div>
        </div>
        <div class="zhengzhuangzhaoyao2_3">
          <div
            style="
              flex: 1;
              background-color: rgb(248, 248, 248);
              margin-top: 5px;
              line-height: 39px;
              margin-left: 5px;
            "
            v-for="(item3, index) in list.list3"
            :key="index"
          >
            {{ item3 }}
          </div>
        </div>
      </div>
    </div>
    <div class="long"></div>
    <div class="yun">
      <van-tabbar v-model="active" route>
        <van-tabbar-item name="首页" icon="home-o" replace to="/zhuye"
          >首页</van-tabbar-item
        >
        <van-tabbar-item name="找药" icon="search" replace to="/zhaoyao"
          >找药</van-tabbar-item
        >
        <van-tabbar-item
          name="购物车"
          icon="shopping-cart-o"
          replace to="/shopping"
          >购物车</van-tabbar-item
        >
        <van-tabbar-item name="我的" icon="user-o" replace to="/wode"
          >我的</van-tabbar-item
        >
      </van-tabbar>
    </div>
  </div>
</template>
<script>
export default {
  data() {
    return {
      fit: "cover",
      url: "../assets/新品2.png",
      input: "",
      feng: {
        feng3: ["特价感冒药", "今日扭伤类药品九折", "n95口罩19.9元三包"],
      },
      list: {
        list1: ["感冒发烧", "失眠", "前列腺", "哮喘"],
        list2: ["高血压", "焦虑症", "病毒性肝炎", "癫痫"],
        list3: ["腹泻", "痛风", "心脏病", "跌打扭伤"],
      },
      active: "找药",
     list6:[],
     list7:[]
    };
  },
  mounted(){
     console.log(111)
      this.axios({
      method: "post",
      url: "http://localhost:3000/fenlei",
    })
      .then((res) => {
        console.log(res)
        console.log(111)
        this.list6 = res.data.data
         console.log(this.list6)
      })
      .catch((error) => {
        console.log(error);
      })

        console.log(111)
      this.axios({
      method: "post",
      url: "http://localhost:3000/fenlei2",
    })
      .then((res) => {
        console.log(res)
        console.log(111)
        this.list7 = res.data.data
         console.log(this.list7)
      })
      .catch((error) => {
        console.log(error);
      })
  },
   methods: {
     gengduofenlei_btu(){
         this.$router.push("/fenlei")
     },
      sousuotiaozhuan() {
      this.$router.push("/sousuo");
    },
    tiaozhuan1(cc,dd,ee){
       console.log(dd),
    this.$router.push({
        name: "fenlei2",
        params: {id: cc,
        name:dd,
        id2:ee
        },
    })
    }
  }
};
</script>
 
<style scoped>
.head {
  width: 100%;
  height: 150px;
  background-color: rgb(1, 154, 254);
  position: relative;
}

.head1 {
  height: 48%;
  position: relative;
}
.head1_1 {
  position: absolute;
  color: white;
  top: 5px;
  left: 10px;
}
.head1_2 {
  position: absolute;
  width: 10%;
  height: 70%;
  top: 15px;
  right: 10px;
}
.head1_2_img {
  height: 70%;
  background-image: url(../assets/消息2.png);
  background-size: 40px 37px;
  background-repeat: no-repeat;
}
.head2 {
  height: 6%;
  width: 100%;
  /* position: fixed; */
  z-index: 3;
}
.head3 {
  width: 100%;
  height: 19%;
  position: absolute;
  bottom: 1px;
}
.head3 > span {
  position: absolute;
  color: red;
}
.fenleizhaoyao {
  width: 100%;
  height: 290px;
  background-color: white;
  display: flex;
  flex-direction: column;
}
.fenleizhaoyao1 {
  flex: 1;
  position: relative;
}
.fenleizhaoyao1_1 {
  position: absolute;
  left: 10px;
  line-height: 34px;
  font-size: 20px;
  font-weight: 500;
}
.fenleizhaoyao1_2 {
  position: absolute;
  line-height: 34px;
  right: 10px;
  font-size: 10px;
}
.fenleizhaoyao2 {
  margin-left: 10px;
  width: 94%;
 height: 35px;
   box-shadow: 0 2px 4px rgba(0, 0, 0, 0.12), 0 0 6px rgba(0, 0, 0, 0.04);
  border-radius: 99px;
}
.fenleizhaoyao2_1{
  margin-left: 30px;
line-height: 35px; 
color:red
}
.el-carousel__item:nth-child(2n) {
    background-color: white;
    border-radius: 99px;
  }
  
  .el-carousel__item:nth-child(2n+1) {
    background-color: white;
    border-radius: 99px;
  }
.fenleizhaoyao3 {
  margin-top: 8px;
  flex: 4;
  width: 94%;
  margin-left: 10px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.12), 0 0 6px rgba(0, 0, 0, 0.04);
  display: flex;
  flex-direction: column;
}
.fenleizhaoyao3_2,
.fenleizhaoyao3_1 {
  flex: 1;
  display: flex;
}
.fenleizhaoyao3_1 > div,
.fenleizhaoyao3_2 > div {
  flex: 1;
  display: flex;
  flex-direction: column;
  text-align: center;
}
.zhengzhuangzhaoyao {
  margin-left: 10px;
  margin-top: 10px;
  height: 220px;
  width: 94%;
  display: flex;
  flex-direction: column;
}
.zhengzhuangzhaoyao1 {
  flex: 1;
  position: relative;
}
.zhengzhuangzhaoyao2 {
  flex: 4;
  display: flex;
}
.zhengzhuangzhaoyao2 > div {
  flex: 1;
  display: flex;
  flex-direction: column;
}
.zhengzhuangzhaoyao1_1 {
  position: absolute;
  top: 8px;
  bottom: 8px;
  margin: auto 0;
  font-size: 20px;
  font-weight: 500;
}
.zhengzhuangzhaoyao1_2 {
  position: absolute;
  top: 15px;
  bottom: 15px;
  margin: auto 0;
  right: 10px;
  font-size: 10px;
}
.long {
  height: 100px;
}
.yun {
  position: fixed;
  bottom: 0px;
}
</style>